Component({
  data: {
    timeSegments: [
        // 按时间顺序从0-12点排列（关键修复）
        // { start: 0, end: 1, color: '#eee' },    // 0-1点：默认灰色（与canvas背景一致）
        // { start: 1, end: 2, color: '#ffd700' }, // 1-2点：黄色（目标位置）
        // { start: 2, end: 2.5, color: '#00ff00' },// 2-2:30：绿色
        // { start: 2.5, end: 10, color: '#eee' }, // 2:30-10点：默认灰色
        // { start: 10, end: 12, color: '#ff0000' }// 10-12点：红色（覆盖到12点末尾）
      ]
  },
  methods: {
    init(sm2List){
      let timeSegments = [];
      let obg = {};
      sm2List.forEach((num,index)=>{
        obg={
          start:index/4,end:index/4+0.25,color:num==0?'#8BA2B0':'#A6D9F7',
        }
        timeSegments.push(obg)
      })
      this.setData({
        timeSegments,
      },()=>{
        this.drawClock();
      })
    },
    drawClock() {
      const query = wx.createSelectorQuery().in(this);
      query.select('.clock-canvas')
        .fields({ node: true, size: true })
        .exec((res) => {
          const canvas = res[0].node;
          const ctx = canvas.getContext('2d');
          const dpr = wx.getSystemInfoSync().pixelRatio;
          
          // 适配视网膜屏
          canvas.width = res[0].width * dpr;
          canvas.height = res[0].height * dpr;
          ctx.scale(dpr, dpr);

          // 基础参数
          const center = res[0].width / 2; // 圆心坐标
          const radius = center * 0.8;     // 圆半径（占容器80%）
          const startAngle = -Math.PI / 2; // 调整起始角度为12点方向

          // 设置线条端点为圆润样式（关键修改）
          ctx.lineCap = 'round';

          // 绘制背景灰圈（整体轮廓）
          ctx.beginPath();
          ctx.arc(center, center, radius, 0, 2 * Math.PI);
          ctx.strokeStyle = '#eee';
          ctx.lineWidth = 10; // 圆圈粗细
          ctx.stroke();

          // 绘制时间段颜色（关键逻辑）
          this.data.timeSegments.forEach(segment => {
            // 时间转弧度：12小时对应2π弧度，每小时=π/6弧度
            const startRad = startAngle + (segment.start * Math.PI / 6);
            const endRad = startAngle + (segment.end * Math.PI / 6);
            
            ctx.beginPath();
            ctx.arc(center, center, radius, startRad, endRad);
            ctx.strokeStyle = segment.color;
            ctx.lineWidth = 10;
            ctx.stroke();
          });

          // 移除原中心小圆点绘制代码（关键删除）
          // ... 原中心小圆点绘制代码已删除 ...
        });
    }
  }
});
